import { Component } from 'react';
import { View } from '@tarojs/components'
import Skeleton from 'taro-skeleton'
import './index.scss'

export default class SkeletonView extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <View className='skeleton-wrap' style='height: 100vh; overflow: hidden;'>
          <View className='category-tabs'>
            <Skeleton row={14} rowHeight='70rpx' rowWidth='100%' />
          </View>
          <View className='category-cont'>
              <View className='wrap-cont'>
                <Skeleton title titleWidth='100%' />
                <Skeleton type='column' avatarShape='square' title titleWidth='80%' avatar  />
                <Skeleton type='column' avatarShape='square' title titleWidth='80%' avatar  />
                <Skeleton type='column' avatarShape='square' title titleWidth='80%' avatar  />
              </View>
              <View className='wrap-cont'>
                <Skeleton title titleWidth='100%' />
                <Skeleton type='column' avatarShape='square' title titleWidth='80%' avatar  />
                <Skeleton type='column' avatarShape='square' title titleWidth='80%' avatar  />
                <Skeleton type='column' avatarShape='square' title titleWidth='80%' avatar  />
              </View>
              <View className='wrap-cont'>
                <Skeleton title titleWidth='100%' />
                <Skeleton type='column' avatarShape='square' title titleWidth='80%' avatar  />
                <Skeleton type='column' avatarShape='square' title titleWidth='80%' avatar  />
                <Skeleton type='column' avatarShape='square' title titleWidth='80%' avatar  />
              </View>
              <View className='wrap-cont'>
                <Skeleton title titleWidth='100%' />
                <Skeleton type='column' avatarShape='square' title titleWidth='80%' avatar  />
                <Skeleton type='column' avatarShape='square' title titleWidth='80%' avatar  />
                <Skeleton type='column' avatarShape='square' title titleWidth='80%' avatar  />
              </View>
          </View>
      </View>
    )
  }
}
